<template>
  <div>
  <div class="barticle3">
    <a href="#">综合</a>
    <a href="#">价格</a>
    <a href="#">折扣</a>
    <a href="#" id="shaixuan">筛选<i class="iconfont icon-shaixuan"></i></a>
  </div>
  <div class="barticle4">
    <p>共找到<b>{{totalnumber}}</b>件商品</p>
  </div>
    <div id="mescroll" class="mescroll">
  <div class="barticle5" id="dataList">
    <div class="barticle5_1" v-for="n in bcartslist">
      <div class="barticle5_1_1"><i class="iconfont icon-shoucang"></i></div>
      <div class="barticle5_1_2"><img :src="n.pic"/></div>
      <P><b>{{n.pinpai}}</b>{{n.pinpai1}}</P>
      <h3>￥{{n.price}}</h3>
      <h5>{{n.web}}</h5>
    </div>
  </div>
    </div>
    <shop-articlepinpai @chaxun="initData"></shop-articlepinpai>
    <shop-articlezimu></shop-articlezimu>
  </div>
</template>

<script type="text/ecmascript-6">
   import ShopArticlepinpai from  "./ShopArticlepinpai.vue"
   import ShopArticlezimu from "./ShopArticlezimu.vue"
   import bshopapis from "../../apis/bshopapis"
    export default {
      data() {
        return {
          bcartslist: [],
          totalnumber: 0,
          mescroll: null
        }
      },
      components: {
        ShopArticlepinpai,
        ShopArticlezimu
      },
      created: function () {
        this.initData();
      },
      methods: {
        initData: function (data1) {
          if (data1 != null) {
            this.bcartslist = data1;
            this.totalnumber = data1.length;
          } else {
            bshopapis.getshoplist((data) => {
              this.bcartslist = data;
              this.totalnumber = data.length;
            })
          }
        },
//        downCallback:function () {
//          mescroll.endSuccess();
//        }
      },
//      mounted: function () {
//        var self = this;
//        self.mescroll = new MeScroll("mescroll", {});
//        document.getElementById("dataList").style.display="block";
//      }
//      mounted: function() {
//        //创建MeScroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
//        //解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
//        var self = this;
//        self.mescroll = new MeScroll("mescroll", {
//          up: {
//            callback: self.upCallback, //上拉回调
//            //以下参数可删除,不配置
//            //page:{size:8}, //可配置每页8条数据,默认10
//            toTop:{ //配置回到顶部按钮
//              src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
//              //offset : 1000
//            },
//            empty:{ //配置列表无任何数据的提示
//              warpId:"dataList",
//              icon : "../res/img/mescroll-empty.png" ,
////						  	tip : "亲,暂无相关数据哦~" ,
////						  	btntext : "去逛逛 >" ,
////						  	btnClick : function() {
////						  		alert("点击了去逛逛按钮");
////						  	}
//            }
//          }
//        });
//
//        //初始化vue后,显示vue模板布局
//        document.getElementById("dataList").style.display="block";
//      },
   }
</script>

<style scoped lang="scss">

  .barticle3{
    width:100%;
    height:0.6rem;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #dddddd;
  }
  .barticle3 a{
    font-size: 0.18rem;
    text-align: center;
    line-height: 0.7rem;
    color:#666;
  }
  .barticle3 a:first-child{
    color:#ed145b;
  }

  .barticle4{
    width:100%;
    height:0.6rem;
    border-bottom: 1px solid #dddddd;
  }
  .barticle4 p{
    font-size: 0.16rem;
    text-align: center;
    line-height: 0.6rem;
  }
  .barticle4 b{
    color: #ed145b;
  }
  .barticle5{
    width:100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .barticle5_1{
    width:50%;
    padding:0 0.1rem 0.3rem;
    box-sizing: border-box;
  }
  .barticle5_1_1{
    width:100%;
    height:0.5rem;
  }
  .barticle5_1_1 i{
    font-size:0.2rem;
    float: right;
    padding-top:0.1rem;
    padding-right:0.1rem;
    color:#595c5e;
  }
  .barticle5_1_2{
    width:100%;

  }
  .barticle5_1_2 img{
    width:100%;
  }
  .barticle5_1 p{
    font-size:0.14rem;
    color:#3e3f40;
    margin-top:0.1rem;
  }
  .barticle5_1 p b{
    font-weight: normal;
  }
  .barticle5_1 h3{
    margin-top:0.1rem;
  }
  .barticle5_1 h5{
    margin-top:0.1rem;
    font-weight: normal;
    font-size:0.12rem;
    color:#6d727b;
  }
  .barticle5_1:nth-child(odd){
    border-bottom: 1px solid #dddddd;
    border-right:1px solid #dddddd;
  }
  .barticle5_1:nth-child(even){
    border-bottom: 1px solid #dddddd;
  }
</style>
